<template>
    <div class="register_form">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="0px" status-icon>
            <el-form-item prop="mobile">
                <el-input :prefix-icon="Iphone" placeholder="请输入手机号" size="large" v-model="ruleForm.mobile" />
            </el-form-item>
            <el-form-item prop="code">
                <div class="flex wh">
                    <el-input class="mr-lg" :prefix-icon="Key" placeholder="请输入验证码" size="large" v-model="ruleForm.code" />
                    <el-button v-if="count <= 0" size="large" class="flex-1" type="primary" :loading="countLoading" @click="() => setCountDown(60, ruleForm.mobile)">获取验证码</el-button>
                    <el-button v-else size="large" class="flex-1" type="primary" disabled>{{ count }}s后重新获取</el-button>
                </div>
            </el-form-item>
            <el-form-item prop="password">
                <el-input :prefix-icon="Lock" placeholder="密码由6-18位数字与字母、符号组成" size="large" type="password" show-password v-model="ruleForm.password" />
            </el-form-item>
            <el-form-item prop="cPassword">
                <el-input :prefix-icon="Lock" placeholder="再次输入密码" size="large" type="password" show-password v-model="ruleForm.cPassword" />
            </el-form-item>
            <el-form-item>
                <el-button :loading="loading" @click="handleRegister" size="large" class="wh" type="primary">注 册</el-button>
            </el-form-item>
            <el-form-item>
                <div class="el-checkbox" @click="handleOpenManual">
                    <div :class="ruleForm.manual ? 'is-checked' : ''" class="el-checkbox__input">
                        <div class="el-checkbox__inner"></div>
                    </div>
                    <div class="el-checkbox__label">
                        同意并遵守 《服务条款》 和 《隐私条款》
                    </div>
                </div>
            </el-form-item>
        </el-form>
        <c-register-agreement @change="ruleForm.manual = true" ref="cRegisterAgreementRef" />
    </div>
</template>
<script setup>
import cRegisterAgreement from "./RegisterAgreement.vue";
import { ref, getCurrentInstance } from "vue";

import { Iphone, Lock, Key } from "@element-plus/icons-vue";
import { useLoginHook } from "@/hooks/useSendVerificationCode.js";
import { deepClone } from "@/utils/index";
const { count, countLoading, setCountDown } = useLoginHook();
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance();
const active = ref(0);
const ruleForm = ref({
    manual: false,
});
const emit = defineEmits(["change"]);
const ruleFormRef = ref();
const loading = ref(false);

const cRegisterAgreementRef = ref();

const handleOpenManual = () => {
    // ruleForm.value.manual = true;
    cRegisterAgreementRef.value.handleOpen();
};

const handleRegister = () => {
    ruleFormRef.value.validate((valid) => {
        if (valid) {
            if (!ruleForm.value.manual) {
                ElMessage.warning("请阅读并同意并遵守 《服务条款》 和 《隐私条款》");
                return;
            }
            const data = deepClone(ruleForm.value);
            loading.value = true;
            proxy.$post({ url: "/sellerReg/register/mobile", data }).then(
                (res) => {
                    ElMessage.success("注册成功");
                    emit("change");
                    loading.value = false;
                },
                () => {
                    loading.value = false;
                }
            );
        }
    });
};

const rules = ref({
    mobile: [
        {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
        },
    ],
    code: [
        {
            required: true,
            message: "请输入验证码",
            trigger: "blur",
        },
    ],
    password: [
        {
            required: true,
            message: "请输入密码",
            trigger: "blur",
        },
    ],
    cPassword: [
        {
            required: true,
            validator: (rule, value, callback) => {
                if (!value) {
                    callback(new Error("请再次确认密码"));
                } else if (ruleForm.value.password !== value) {
                    callback(new Error("两次密码输入不一致"));
                } else {
                    callback();
                }
            },
            trigger: "blur",
        },
    ],
});
</script>
<style lang="less" scoped>
.register_form {
    margin: 60px 70px 0 70px;
}
</style>